.pb-calendar {

  display: block;

  position: relative;

  color: #555555;

}

.pb-calendar .top-frame {

  padding-top: 0px;

  margin-bottom: 15px;

}

@media screen and (max-width: 991px) and (min-width: 768px) {

  .pb-calendar .top-frame {

    margin-bottom: 28px;

  }

}

@media screen and (max-width: 767px) {

  .pb-calendar .top-frame {

    margin-bottom: 20px;

  }

}

.pb-calendar .top-frame > .year-month-frame {

  display: block;

  float: left;

  width: 70%;

  font-size: 42px;

  line-height: 42px;

  font-weight: bold;

  text-align: left;

  padding-left: 15px;

  box-sizing: border-box;

  /*.month{

				color: black;

			}*/

}

@media screen and (max-width: 291px) and (min-width: 268px) {

  .pb-calendar .top-frame > .year-month-frame {

    font-size: 32px;

    line-height: 32px;

  }

}

@media screen and (max-width: 267px) {

  .pb-calendar .top-frame > .year-month-frame {

    font-size: 28px;

    line-height: 28px;

  }

}

.pb-calendar .top-frame > .year-month-frame > .year,

.pb-calendar .top-frame > .year-month-frame > .month {

  display: inline-block;

}

.pb-calendar .top-frame > .year-month-frame .year {

  color: #4287c2;

  margin-right: 10px;

}

.pb-calendar .top-frame > .control-frame {

  display: block;

  float: right;

  width: 30%;

  text-align: right;

  padding-right: 15px;

  box-sizing: border-box;

}

.pb-calendar .top-frame > .control-frame > .control-btn {

  color: #b3b3b3;

  padding: 0px;

  vertical-align: middle;

  display: inline-block;

}

.pb-calendar .top-frame > .control-frame > .control-btn > .icon {

  height: 48px;

  width: auto;

}

@media screen and (max-width: 291px) and (min-width: 268px) {

  .pb-calendar .top-frame > .control-frame > .control-btn > .icon {

    height: 48px;

  }

}

@media screen and (max-width: 267px) {

  .pb-calendar .top-frame > .control-frame > .control-btn > .icon {

    height: 35px;

  }

}

.pb-calendar .top-frame > .control-frame > .control-btn.disabled {

  opacity: 0.3;

}

.pb-calendar .top-frame > .control-frame > .control-btn + .control-btn {

  margin-left: 35px;

}

.pb-calendar .top-frame:after,

.pb-calendar .top-frame:before {

  display: table;

  content: "";

  clear: both;

}

.pb-calendar > .calendar-head-frame > .row > .col.holiday {

  color: #c53131;

}

.pb-calendar > .calendar-body-frame > .row > .col > .day-label {

  display: inline-block;

  width: 30px;

  height: 28px;

  line-height: 28px;

}

@media screen and (max-width: 267px) {

  .pb-calendar > .calendar-body-frame > .row > .col > .day-label {

    width: 25px;

    height: 24px;

    line-height: 24px;

  }

}

.pb-calendar > .calendar-body-frame > .row > .col > .day-label,

.pb-calendar > .calendar-body-frame > .row > .col > .day-label:active,

.pb-calendar > .calendar-body-frame > .row > .col > .day-label:hover,

.pb-calendar > .calendar-body-frame > .row > .col > .day-label:visited,

.pb-calendar > .calendar-body-frame > .row > .col > .day-label:focus {

  text-decoration: none;

  color: #555555;

}

.pb-calendar > .calendar-body-frame > .row > .col > .day-label:hover {

  color: #777777;

}

.pb-calendar > .calendar-body-frame > .row > .col.holiday,

.pb-calendar > .calendar-body-frame > .row > .col.holiday > .day-label {

  color: #717171;

}

.pb-calendar > .calendar-head-frame > .row,

.pb-calendar > .calendar-body-frame > .row {

  display: table;

  table-layout: fixed;

  width: 100%;

  margin-left: 0;

  margin-right: 0;

}

.pb-calendar > .calendar-head-frame > .row > .col,

.pb-calendar > .calendar-body-frame > .row > .col {

  display: table-cell;

  width: 14.28571429%;

  vertical-align: top;

  text-align: center;

  font-size: 26px;

  font-weight: 500;

  line-height: 26px;

  padding: 10px 5px;

  height: 80px;

}

.pb-calendar > .calendar-head-frame > .row > .col > .schedule-dot-list,

.pb-calendar > .calendar-body-frame > .row > .col > .schedule-dot-list {

  margin-top: 10px;

  text-align: center;

  height: 25px;

}

@media screen and (max-width: 291px) and (min-width: 268px) {

  .pb-calendar > .calendar-head-frame > .row > .col > .schedule-dot-list,

  .pb-calendar > .calendar-body-frame > .row > .col > .schedule-dot-list {

    height: 20px;

  }

}

@media screen and (max-width: 267px) {

  .pb-calendar > .calendar-head-frame > .row > .col > .schedule-dot-list,

  .pb-calendar > .calendar-body-frame > .row > .col > .schedule-dot-list {

    height: 15px;

  }

}

.pb-calendar > .calendar-head-frame > .row > .col > .schedule-dot-list > .schedule-dot-item,

.pb-calendar > .calendar-body-frame > .row > .col > .schedule-dot-list > .schedule-dot-item {

  display: inline-block;

  border-radius: 50%;

  width: 7px;

  height: 7px;

  vertical-align: top;

  margin-left: 2px;

  margin-right: 2px;

}

@media screen and (max-width: 291px) and (min-width: 268px) {

  .pb-calendar > .calendar-head-frame > .row > .col > .schedule-dot-list > .schedule-dot-item,

  .pb-calendar > .calendar-body-frame > .row > .col > .schedule-dot-list > .schedule-dot-item {

    width: 7px;

    height: 7px;

  }

}

@media screen and (max-width: 767px) {

  .pb-calendar > .calendar-head-frame > .row > .col > .schedule-dot-list > .schedule-dot-item,

  .pb-calendar > .calendar-body-frame > .row > .col > .schedule-dot-list > .schedule-dot-item {

    width: 7px;

    height: 7px;

  }

}

@media screen and (max-width: 300px) and (min-width: 200px) {

  .pb-calendar > .calendar-head-frame > .row > .col,

  .pb-calendar > .calendar-body-frame > .row > .col {

    font-size: 20px;

    font-weight: 500;

    line-height: 20px;

    padding: 7px 2px;

    height: 70px;

  }

}

@media screen and (max-width: 300px) and (min-width: 268px) {

  .pb-calendar > .calendar-head-frame > .row > .col,

  .pb-calendar > .calendar-body-frame > .row > .col {

    font-size: 18px;

    font-weight: 500;

    line-height: 18px;

    padding: 7px 4px;

    height: 70px;

  }

}

@media screen and (max-width: 267px) {

  .pb-calendar > .calendar-head-frame > .row > .col,

  .pb-calendar > .calendar-body-frame > .row > .col {

    font-size: 14px;

    font-weight: 500;

    line-height: 14px;

    padding: 5px 3px;

    height: 50px;

  }

}

.pb-calendar > .calendar-head-frame > .row > .col.before-month,

.pb-calendar > .calendar-body-frame > .row > .col.before-month,

.pb-calendar > .calendar-head-frame > .row > .col.after-month,

.pb-calendar > .calendar-body-frame > .row > .col.after-month {

  color: #b3b3b3;

}